<template>
  <div>
    <h2>主要按钮</h2>
    <hr/>

    <el-row class="mb-4">
      <el-button type="primary">Primary</el-button>
      <el-button type="primary" disabled>Primary</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="primary" round>round</el-button>
      <el-button type="primary" round disabled>round</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="primary" :icon="Search">搜索</el-button>
      <el-button type="primary" :icon="Search" disabled>搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="primary" :icon="Search" round>搜索</el-button>
      <el-button type="primary" :icon="Search" round disabled>搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="primary">
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button type="primary" disabled>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="primary" round>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button type="primary" disabled round>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>

    <h2>次要按钮</h2>
    <hr/>

    <el-row class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button plain disabled>Primary</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain round>round</el-button>
      <el-button plain round disabled>round</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain :icon="Search">搜索</el-button>
      <el-button plain :icon="Search" disabled>搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain :icon="Search" round>搜索</el-button>
      <el-button plain :icon="Search" round disabled>搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button plain disabled>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain round>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button plain disabled round>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>

    <h2>幽灵按钮</h2>
    <hr/>

    <el-row class="mb-4">
      <el-button plain class="is-ghost">Plain</el-button>
      <el-button plain disabled class="is-ghost">Primary</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain round class="is-ghost">round</el-button>
      <el-button plain round disabled class="is-ghost">round</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain :icon="Search" class="is-ghost">搜索</el-button>
      <el-button plain :icon="Search" disabled class="is-ghost">搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain :icon="Search" round class="is-ghost">搜索</el-button>
      <el-button plain :icon="Search" round disabled class="is-ghost">搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain class="is-ghost">
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button plain disabled class="is-ghost">
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button plain round class="is-ghost">
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button plain disabled round class="is-ghost">
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>

    
    <h2>危险按钮</h2>
    <hr/>

    <el-row class="mb-4">
      <el-button type="danger">Danger</el-button>
      <el-button type="danger" disabled>Danger</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="danger" round>round</el-button>
      <el-button type="danger" round disabled>round</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="danger" :icon="Search">搜索</el-button>
      <el-button type="danger" :icon="Search" disabled>搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="danger" :icon="Search" round>搜索</el-button>
      <el-button type="danger" :icon="Search" round disabled>搜索</el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="danger">
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button type="danger" disabled>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>

    <el-row class="mb-4">
      <el-button type="danger" round>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
      <el-button type="danger" disabled round>
        搜索<el-icon class="el-icon--right"><Search /></el-icon>
      </el-button>
    </el-row>
  </div>
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
} from '@element-plus/icons-vue'

onMounted(() => {
  nextTick(() => {
    window.scrollTo(0, 0)
  })
})
</script>

<style>
.mb-4 {
  margin-bottom: 20px;
}
</style>